<template>
  <div id="openPlatform">
    <img
      src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/bg_openPlatform.png"
      class="banner"
    />
    <div class="advantage">
      <ul>
        <li>
          <div class="txt1">
            <countTo
              ref="uCountTo1"
              :start-val="0"
              :end-val="10"
              :duration="3000"
              separator=""
            /><span class="dw">年</span>
          </div>
          <span class="txt2">完成数千家定制化项目</span>
        </li>
        <li>
          <div class="txt1">
            <countTo
              ref="uCountTo2"
              :start-val="0"
              :end-val="100000"
              :duration="3000"
              separator=","
            /><span class="dw">+</span>
          </div>
          <span class="txt2">10万多家企业用户的共同选择</span>
        </li>
        <li>
          <div class="txt1">
            <countTo
              ref="uCountTo3"
              :start-val="0"
              :end-val="100"
              :duration="3000"
              separator=""
              class="uCountTo"
            /><span class="dw">万</span>
          </div>
          <span class="txt2">日均订单</span>
        </li>
        <li>
          <div class="txt1">
            <countTo
              ref="uCountTo4"
              :start-val="0"
              :end-val="140"
              :duration="3000"
              separator=""
              class="uCountTo"
            /><span class="dw">亿+</span>
          </div>
          <span class="txt2">年交易额</span>
        </li>
      </ul>
    </div>
    <div class="titletxt" style="margin-top: 3.6rem; margin-bottom: 4.5rem">
      <h5>卡券平台输出</h5>
      <span
        >江苏铭创的权益解决方案会基于客户业务的推广需求，为客户定制个性化营销活动</span
      >
    </div>
    <div class="openPlat">
      <img
        src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/openPlat1.png"
      />
      <ul class="programme_ul">
        <li>
          <span>操作便捷，高效对接</span>
          <div class="line"></div>
          <p>
            对于需要进行卡券互通需求，铭创专业的研发团队能够快速支撑，最短时间完成卡券对接。
          </p>
        </li>
        <li>
          <span>货源丰富，涵盖全品类</span>
          <div class="line"></div>
          <p>
            整合C端用户高频使用的虚拟数字产品，集成了包含话费、流量、加油卡、影视会员、游戏点卡等众多福禄业内销量的类目。
          </p>
        </li>
        <li>
          <span>强势资源，保障低价</span>
          <div class="line"></div>
          <p>
            凭借雄厚资金实力，整合行业优势资源，与超过20个总代品牌合作，保障产品优质低价。
          </p>
        </li>
      </ul>
    </div>
    <div class="platadvantage">
      <div class="titletxt" style="padding-top: 5.8rem; margin-bottom: 7.7rem">
        <h5 style="color: #ffffff">平台优势</h5>
        <span style="color: #ffffff">上下游互联互通的数字化纽带</span>
      </div>
      <ul class="advantage_ul">
        <li>
          <img src="@/assets/icon/pticon1.png" />
          <div>全场景</div>
          <p>覆盖企业福利预算管理 员工职场/生活全场景</p>
        </li>
        <li>
          <img src="@/assets/icon/pticon2.png" />
          <div>一站式</div>
          <p>员工福利一站统筹 管理发放，高效便捷</p>
        </li>
        <li>
          <img src="@/assets/icon/pticon3.png" />
          <div>兼容性</div>
          <p>兼容企业原供应商系统 人事系统和财务管理体系</p>
        </li>
        <li>
          <img src="@/assets/icon/pticon4.png" />
          <div>延展性</div>
          <p>平台支持企业自主拓展开发应用 延伸多重实用职场功能</p>
        </li>
        <li>
          <img src="@/assets/icon/pticon5.png" />
          <div>实时性</div>
          <p>员工福利一站统筹 管理发放，高效便捷</p>
        </li>
        <li>
          <img src="@/assets/icon/pticon6.png" />
          <div>定制化</div>
          <p>支持企业专属定制 彰显企业文化</p>
        </li>
      </ul>
    </div>
    <div class="mode">
      <div class="titletxt" style="padding-top: 5.7rem; margin-bottom: 4.5rem">
        <h5>多种接入方式</h5>
        <span>满足客户各种需求</span>
      </div>
      <ul class="mode_ul">
        <li>
          <img src="@/assets/icon/access_p1.png" />
          <div>批充批采</div>
          <div class="line1"></div>
          <p>
            批量充值或以兑换码形式供货；直充操作简单、到账快；兑换码出货迅速，操作灵活。
          </p>
        </li>
        <li>
          <img src="@/assets/icon/access_p2.png" />
          <div>API接口</div>
          <div class="line1"></div>
          <p>标准化API接口，App、微信公众号、PC客户端、小程序都能免费接入。</p>
        </li>
        <li>
          <img src="@/assets/icon/access_p3.png" />
          <div>虚拟商城</div>
          <div class="line1"></div>
          <p>
            以h5商城形式供货，提供从选品、搭建、页面设计到运营管理的全流程服务。
          </p>
        </li>
        <li>
          <img src="@/assets/icon/access_p4.png" />
          <div>卡券营销</div>
          <div class="line1"></div>
          <p>
            支持满减券、折扣券、兑换券等，可以通过新建卡券，在商城中快速完成卡券接入，达成活动闭环。
          </p>
        </li>
      </ul>
    </div>
    <div class="titletxt" style="margin-top: 3.6rem; margin-bottom: 4.5rem">
      <h5>安全稳定可靠的系统支持</h5>
      <span>来自互联网优秀的研发团队，打造安全稳定可用的系统</span>
    </div>
    <div class="supply">
      <div class="supplyChain">
        <div class="supplybox">
          <img src="@/assets/icon/science-red.png" />
          <div class="rightChain">
            <div class="redrect"></div>
            <p>
              强大的研发实力，开放平台ISV认证、小程序、公众号，完善的API<br />接口对接服务，包括场景、商品、数据等。
            </p>
            <div class="modulebox">
              <div style="margin-right: 3.7rem">
                <div
                  style="width: 5.6rem; height: 5.6rem; margin-right: 0.9rem"
                >
                  <img
                    src="@/assets/icon/xitong.png"
                    style="width: 4.8rem; height: 5.6rem"
                  />
                </div>
                <div style="display: flex; flex-direction: column">
                  <span style="color: #d31b1b">99.99%</span>
                  <span>系统可用</span>
                </div>
              </div>
              <div style="margin-right: 3.7rem">
                <div
                  style="width: 5.6rem; height: 5.6rem; margin-right: 0.9rem"
                >
                  <img
                    src="@/assets/icon/chuli.png"
                    style="width: 5.3rem; height: 5.4rem"
                  />
                </div>
                <div style="display: flex; flex-direction: column">
                  <span style="color: #d31b1b">2000+ </span>
                  <span>每秒处理订单数</span>
                </div>
              </div>
              <div>
                <div
                  style="width: 5.6rem; height: 5.6rem; margin-right: 0.9rem"
                >
                  <img
                    src="@/assets/icon/cpu.png"
                    style="width: 5.6rem; height: 5.6rem"
                  />
                </div>
                <div style="display: flex; flex-direction: column">
                  <span style="color: #d31b1b"><100毫秒</span>
                  <span>服务平均响应</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="titletxt" style="margin-top: 3.6rem; margin-bottom: 4.5rem">
      <h5>合作品牌</h5>
      <span
        >汇聚百货商超、餐饮美食、休闲娱乐、教育服务及各大电商平台电子券</span
      >
    </div>
    <div class="cooper1">
      <img
        src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/company2.png"
      />
    </div>
    <div class="footer-top">
      <div class="licence-code">
        <ul class="nav">
          <li>首页</li>
          <li>产品与服务</li>
          <li>解决方案</li>
          <li class="active">开放平台</li>
          <li>新闻中心</li>
          <li>关于我们</li>
          <li>联系我们</li>
        </ul>
        <!-- <div>
          <h5 class="about-h55">企业地址</h5>
          <p class="adress">
            南京总公司：南京市秦淮区光华路海福巷90-1号 南报文创园
          </p>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "openPlatform",
};
</script>

<style scoped lang="scss">
#openPlatform {
  .banner {
    width: 100%;
  }
  .advantage {
    width: 100%;
    height: 14.5rem;
    background: #f4f5f8;
    align-items: center;
    ul {
      width: 100%;
      height: 14.5rem;
      display: flex;
      align-items: center;
      justify-content: center;

      li {
        width: 26.9rem;
        height: 11.9rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-right: 0.1rem solid #ef633d;

        .txt1 {
          font-size: 4rem;
          font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
          font-weight: 700;
          text-align: center;
          color: #cd0000;
          margin-bottom: 0.95rem;

          span {
            display: inline-block;
            font-size: 4rem;
            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
            font-weight: 700;
            text-align: left;
            color: #e0251b;
          }
          .dw {
            font-size: 2.2rem;
          }
        }

        .txt2 {
          font-size: 1.4rem;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: center;
          color: #666666;
          line-height: 2rem;
          display: block;
        }
      }
    }
  }
  .titletxt {
    width: 107.6rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    h5 {
      font-size: 2.4rem;
      color: #000000;
      line-height: 3.1rem;
      font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
      font-weight: 500;
      margin-bottom: 0.3rem;
    }

    span {
      font-size: 1.4rem;
      color: #666666;
      line-height: 1.9rem;
      text-align: center;
    }
  }
  .openPlat {
    width: 107.6rem;
    height: auto;
    margin: 4.6rem auto 8.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      width: 67.4rem;
      height: 36.9rem;
    }
    .programme_ul {
      width: 54.7rem;
      height: 51.8rem;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      li {
        width: 54.7rem;
        height: 11.2rem;
        background: #ffffff;
        border-radius: 1.4rem;
        box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.16);
        padding-left: 2.3rem;
        display: flex;
        flex-direction: column;
        justify-content: center;

        span {
          display: inline-block;
          font-size: 2rem;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: 400;
          text-align: left;
          color: #181818;
        }

        div {
          width: 46.8rem;
          height: 0px;
          border-bottom: 0.1rem solid #e0251b;
          margin: 0.8rem 0 1.3rem 0;
        }

        p {
          width: 48.2rem;
          font-size: 1.4rem;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: 400;
          text-align: left;
          color: #666666;
          line-height: 2.1rem;
        }
      }
    }
  }
  .platadvantage {
    width: 100%;
    height: 52rem;
    background-image: url("https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/platadvantage.png");
    background-size: 100% 52rem;
    background-repeat: no-repeat;
    .advantage_ul {
      width: 120rem;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin: 0 auto;
      li {
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: 6rem;
          height: 6rem;
        }
        div {
          font-size: 2rem;
          font-family: Microsoft YaHei, Microsoft YaHei-Bold;
          font-weight: 700;
          text-align: center;
          color: #ffffff;
          margin: 1.3rem 0 1.5rem 0;
        }
        p {
          width: 20rem;
          height: 4.2rem;
          font-size: 1.5rem;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: 400;
          text-align: center;
          color: #ffffff;
          line-height: 2rem;
        }
      }
    }
  }
  .mode {
    width: 100%;
    height: 49.4rem;
    background: rgba(248, 248, 248, 0.91);
    .mode_ul {
      width: 107.6rem;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      li {
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: 10rem;
          height: 10rem;
        }
        div {
          font-size: 2rem;
          font-family: Microsoft YaHei, Microsoft YaHei-Bold;
          font-weight: 700;
          text-align: center;
          color: #181818;
          letter-spacing: 2px;
          margin: 1.3rem 0 0.9rem 0;
        }
        .line1 {
          width: 2.8rem;
          height: 0.3rem;
          background: #ff7333;
          margin-bottom: 2.1rem;
        }
        p {
          width: 24.8rem;
          height: 6.3rem;
          font-size: 1.6rem;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: 400;
          text-align: center;
          color: #666666;
          line-height: 2rem;
        }
      }
    }
  }
  .supply {
    .supplyChain {
      width: 113.4rem;
      margin: 0 auto;
      margin-bottom: 5.8rem;

      .supplybox {
        display: flex;
        align-items: center;

        img {
          width: 53.8rem;
          height: 41.3rem;
        }

        .rightChain {
          width: 67.2rem;
          height: 36.5rem;
          margin-left: -8.1rem;
          padding-left: 5.45rem;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: center;

          .redrect {
            width: 7.1rem;
            height: 0.7rem;
            background: #d31b1b;
            border-radius: 0.4rem;
            margin-bottom: 3.3rem;
          }

          p {
            width: 61.6rem;
            height: 11.3rem;
            font-size: 1.6rem;
            font-family: MicrosoftYaHei, MicrosoftYaHei-Regular;
            font-weight: 400;
            text-align: left;
            color: #000000;
            line-height: 2.9rem;
          }

          .modulebox {
            display: flex;

            div {
              display: flex;

              img {
                height: 5.2rem;
              }

              span {
                font-size: 1.6rem;
                font-family: MicrosoftYaHei, MicrosoftYaHei-Regular;
                font-weight: 400;
                text-align: left;
                color: #000000;
                line-height: 2.1rem;
              }
            }
          }
        }
      }
    }
  }
  .cooper1 {
    width: 117rem;
    height: auto;
    margin: auto;
    margin-top: 3.7rem;

    img {
      width: 117rem;
      margin-bottom: 8.4rem;
    }
  }
}
</style>
